<template>
	<view class="craftsmanHomepage">

		<view class="user flex_ac">
			<view class="flex1 overflow_1">
				<view class="flex_ac overflow_1">
					<view class="f32 flex1 fb overflow_1">
						{{data.name}}
					</view>
					<view class="grbj" v-if="data.user_id == user.id"
						@click="$wanlshop.to('/pages/craftsman/craftsmanAdd?entrance=bj&type='+data.type)">
						编辑
					</view>
				</view>
				<u-tag size="mini" v-if="data.company" :text="data.company.name" mode="light" type="primary"
					class="mt24" />
				<view class="flex f24 mt12">
					<view class="info">
						评分: <text class="cf64 fb ml12">{{data.score}}</text>
					</view>
					<view class="ml24 info">
						接单量: <text class="cf64 fb ml12">{{data.order}}</text>
					</view>
				</view>
				<view class="f24 flex1 flex flex-wrap">
					<view class="tags mr12 mt8" v-for="(item, index) in data.work_type_text" :key="index">
						{{item}}
					</view>
				</view>

				<!-- <view class="flex mt12">
					<view class="cydsn">
						从业{{data.work_time}}年
					</view>
				</view> -->
			</view>

			<view class="">
				<image class="userImg" :src="$wanlshop.oss(data.avatar)" mode=""></image>
			</view>
		</view>
		<block v-if="data.service_content">
			<view class="mt36">
				<image class="fwlr" src="https://img.aibbyp.com/wechatUser/category1/fwlr.png" mode=""></image>
			</view>
			<view class="bjf mt24">
				{{data.service_content}}
			</view>
		</block>
		<block v-if="data.file_images&&data.file_images.length >0">
			<view class="mt36">
				<image class="fwlr" src="https://img.aibbyp.com/wechatUser/craftsman/jjj.png" mode=""></image>
			</view>
			<view class="flex_sb flex-wrap mt24">
				<image class="imgs" @click="previewImage(k,data.file_images)" v-for="(i,k) in data.file_images" :key="i"
					:src="$wanlshop.oss(i)" mode=""></image>
			</view>
		</block>
		<view v-if="option.company" class="lxsf flex_y_center flex_x_center"
			@tap="toChat(data.user_id,'',data.user_id)">
			<image class="imglt" src="https://img.aibbyp.com/wechatUser/category1/lt.png" mode=""></image>
			<view class="ml12">
				聊天
			</view>
			<!-- <view class="ml24">
				<u-button plain>拒绝</u-button>
			</view>
			<view class="flex1 ml24">
				<u-button type="primary">同意</u-button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				data: {},
				user:uni.getStorageSync('wanlshop:user')
			}
		},
		onLoad(option) {
			this.option = option
			this.id = option.id
			this.getworkerHome()

			this.$nextTick(() => {
				setTimeout(() => {
					this.collapseRef.refresh() // 调用u-collapse的刷新方法
				}, 2000)

			})
		},
		methods: {
			previewImage(k, data) {
				let urls = data.map(a => this.$wanlshop.oss(a))
				uni.previewImage({
					urls: urls,
					current: k,
					indicator: 'number',
				});
			},
			getworkerHome() {
				this.$api.post({
					url: '/worker/user_join/workerHome',
					data: {
						id: this.id
					},
					loadingTip: '加载中...',
				}).then(res => {
					this.data = res
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imgs {
		width: 300rpx;
		height: 168rpx;
		border-radius: 12rpx;
		margin-bottom: 32rpx;
		border: 1rpx #ccc dashed;
	}

	.lxsf {
		background: #fff;
		height: 160rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 30rpx 20rpx 60rpx 20rpx;
		z-index: 2;
		left: 0;

		.imglt {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.cydsn {
		font-size: 24rpx;
		color: #865D38;
		background: #FFE4C5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 2rpx 20rpx;
		font-weight: bold;
	}

	.craftsmanHomepage {
		background-image: url('https://img.aibbyp.com/wechatUser/category1/zybjs.png');
		background-size: 100% 550rpx;
		padding: 40rpx 58rpx;
		background-repeat: no-repeat;
		background-color: #fff;
		padding-bottom: 140rpx;
		min-height: 100vh;

		::v-deep.u-collapse-head {
			padding: 0;
		}

		.grbj {
			font-size: 24rpx;
			color: #3D3D3D;
			background: #EEEEEE;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 4rpx 20rpx;
			margin-left: 12rpx;
		}

		// height: 100vh;
		.bjf {
			padding: 24rpx 26rpx;
			background: #FFF7F7;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.fwlr {
			width: 150rpx;
			height: 56rpx;
		}

		.user {
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(129, 129, 129, 0.1);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 24rpx 48rpx;

			.f48 {
				font-size: 48rpx;
			}

			.tags {
				font-size: 20rpx;
				color: #FD5241;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #FD5241;
				padding: 0rpx 16rpx;
				height: 40rpx;
				line-height: 40rpx;
			}

			.userImg {
				margin-left: 20rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}
	}
</style>